"use client";

import { useEffect, useState } from "react";

import { useParams } from "next/navigation";

import { api, CameraDetail } from "@/lib/api";

export default function CameraDetailPage() {

  const { id } = useParams<{ id: string }>();

  const [cam, setCam] = useState<CameraDetail | null>(null);

  const [transits, setTransits] = useState<{ from: string; to: string; weight: number }[]>([]);

  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {

    Promise.all([api.cameraDetail(id), api.cameraTransits(id)])

      .then(([c, t]) => { setCam(c); setTransits(t.transitions); })

      .catch((e) => setErr(e.status === 401 ? "Sign in to view camera detail." : "Camera not found."));

  }, [id]);

  if (err) return <div className="badge danger">{err}</div>;

  if (!cam) return <div className="muted">Loading…</div>;

  return (

    <div>

      <h1>{cam.name || cam.external_camera_id}</h1>

      <p className="muted">External ID: {cam.external_camera_id}</p>

      <div className="grid">

        <div className="card"><div className="muted">Total reads</div><div className="kpi">{cam.read_count}</div></div>

        <div className="card"><div className="muted">Facing</div><div>{cam.direction_facing || "-"}</div></div>

        <div className="card"><div className="muted">Location</div><div>{cam.lat != null ? `${cam.lat.toFixed(4)}, ${cam.lon!.toFixed(4)}` : "unknown"}</div></div>

        <div className="card"><div className="muted">Address</div><div>{cam.address || "-"}</div></div>

      </div>

      <h2>Camera-to-camera transits</h2>

      <p className="muted">Observed vehicle movements into and out of this camera (directed, weighted).</p>

      <div className="card">

        <table>

          <thead><tr><th>From</th><th>To</th><th>Vehicles</th></tr></thead>

          <tbody>

            {transits.map((t, i) => (

              <tr key={i}>

                <td className={t.to === id ? "muted" : ""}>{t.from === id ? "(this camera)" : t.from.slice(0, 8)}</td>

                <td className={t.from === id ? "muted" : ""}>{t.to === id ? "(this camera)" : t.to.slice(0, 8)}</td>

                <td><span className="badge">{t.weight}</span></td>

              </tr>

            ))}

            {!transits.length && <tr><td colSpan={3} className="muted">No transitions observed.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}